<template>
  <div class="banner" id="banner1">
    <div class="banner-bgdarkener">
      <ElRow>
        <ElCol :xs="1" :sm="2" :md="3" :lg="3" :xl="3"></ElCol>
        <ElCol :xs="22" :sm="20" :md="16" :lg="14" :xl="14">
          <div style="height: 200px" />
          <h2 class="banner-heading">The Team</h2>
          <p class="banner-text">
            Our research team is led by Professor Lin Guangsi from the
            Department of Landscape Architecture, School of Architecture, South
            China University of Technology. The main members of the research
            team are 8 students majoring in Landscape Architecture, Civil
            Engineering and Water Conservancy. The web page was produced with
            technical support from two students majoring in Computer Technology
            and Application and Interaction Design.
          </p>
        </ElCol>
      </ElRow>
    </div>
  </div>
  <div class="contents">
    <el-row>
      <el-col :xs="0" :sm="1" :md="2" :lg="2" :xl="4"></el-col>
      <el-col :xs="24" :sm="22" :md="20" :lg="20" :xl="16">
        <div id="members">
          <p class="member-title1">TEAM MEMBER</p>
          <div id="director">
            <p class="member-title2">Project Director and Faculty Advisor</p>
            <div class="line len1"></div>
            <el-row gutter="20">
              <el-col :span="6" :xs="12" :sm="8" :md="6">
                <img
                  src="../assets/members/GuangsiLin.jpg"
                  class="member-photo"
                  alt=""
                />
                <p class="member-name">Guangsi Lin</p>
                <p class="member-intro">
                  Professor and doctoral supervisor of School of Architecture,
                  South China University of Technology
                </p>
              </el-col>
            </el-row>
          </div>

          <div id="researcher">
            <p class="member-title2">Researcher</p>
            <div class="line len4"></div>
            <el-row gutter="20">
              <el-col
                v-for="item in researcherList"
                :key="item.index"
                :span="6"
                :xs="12"
                :sm="8"
                :md="6"
              >
                <img :src="item.photo" class="member-photo" alt="" />
                <p class="member-name">{{ item.name }}</p>
                <p class="member-intro">{{ item.intro }}</p>
              </el-col>
            </el-row>
          </div>

          <div id="advisor">
            <p class="member-title2">Additional Faculty Advisor</p>
            <div class="line len2"></div>
            <el-row gutter="20">
              <el-col
                v-for="item in advisorList"
                :key="item.index"
                :span="6"
                :xs="12"
                :sm="8"
                :md="6"
              >
                <img :src="item.photo" class="member-photo" alt="" />
                <p class="member-name">{{ item.name }}</p>
                <p class="member-intro">{{ item.intro }}</p>
              </el-col>
            </el-row>
          </div>

          <div id="tech">
            <p class="member-title2">Technical Support</p>
            <div class="line len3"></div>
            <el-row gutter="20">
              <el-col
                v-for="item in techList"
                :key="item.index"
                :span="6"
                :xs="12"
                :sm="8"
                :md="6"
              >
                <img :src="item.photo" class="member-photo" alt="" />
                <p class="member-name">{{ item.name }}</p>
                <p class="member-intro">{{ item.intro }}</p>
              </el-col>
            </el-row>
          </div>
        </div>

        <h5>CONTACT US</h5>
        <div class="line len3"></div>
        <ElRow>
          <ElCol class="contact-col" :xs="16" :span="10">
            <div class="contact">
              <img src="../assets/mail.png" alt="" />
              <p style="color: #91b354; margin-bottom: 0px">
                <span> lid_cbalt@163.com </span>
              </p>
            </div>
          </ElCol>
        </ElRow>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "GetInTouch",
  data() {
    return {
      researcherList: [
        {
          index: 1,
          photo: "http://lid-cbalt.com/data/images/members/LuluDai.jpg",
          name: "Lulu Dai",
          position: "Researcher",
          intro:
            "Postgraduate of Landscape Architecture, South China University of Technology",
        },
        {
          index: 2,
          photo: "http://lid-cbalt.com/data/images/members/ShanshanLi.jpg",
          name: "Shanshan Li",
          position: "Researcher",
          intro:
            "Doctoral student in Civil engineering and Water Conservancy, South China University of Technology",
        },
        {
          index: 3,
          photo: "http://lid-cbalt.com/data/images/members/YueLuo.jpg",
          name: "Yue Luo",
          position: "Researcher",
          intro:
            "Postgraduate of Landscape Architecture, South China University of Technology",
        },
        {
          index: 4,
          photo: "http://lid-cbalt.com/data/images/members/YuchenLuo.jpg",
          name: "Yuchen Luo",
          position: "Researcher",
          intro:
            "Postgraduate of Landscape Architecture, South China University of Technology",
        },
        {
          index: 5,
          photo: "http://lid-cbalt.com/data/images/members/MengyunChen.jpg",
          name: "Mengyun Chen",
          position: "Researcher",
          intro:
            "Doctoral student of Landscape Architecture, South China University of Technology",
        },
        {
          index: 6,
          photo: "http://lid-cbalt.com/data/images/members/QiantongCheng.jpg",
          name: "Qiantong Cheng",
          position: "Researcher",
          intro:
            "Undergraduate of Landscape Architecture major, South China University of Technology",
        },
        {
          index: 7,
          photo: "http://lid-cbalt.com/data/images/members/BowenLv.jpg",
          name: "Bowen Lv",
          position: "Researcher",
          intro:
            "Undergraduate of Landscape Architecture major, South China University of Technology",
        },
        {
          index: 8,
          photo: "http://lid-cbalt.com/data/images/members/ZiqianHuang.jpg",
          name: "Ziqian Huang",
          position: "Researcher",
          intro:
            "Postgraduate of Landscape Architecture, South China University of Technology",
        },
      ],
      advisorList:[
        {
          index: 1,
          photo: "http://lid-cbalt.com/data/images/members/ZhaoliWang.jpg",
          name: "Zhaoli Wang",
          position: "Additional Faculty Advisor",
          intro:
            "Professor and doctoral supervisor of School of Civil Engineering & Transportation, South China University of Technology",
        },
        {
          index: 1,
          photo: "http://lid-cbalt.com/data/images/members/ChengguangLai.jpg",
          name: "Chengguang Lai",
          position: "Additional Faculty Advisor",
          intro:
            "Professor and doctoral supervisor of School of Civil Engineering & Transportation, South China University of Technology",
        },
        {
          index: 1,
          photo: "http://lid-cbalt.com/data/images/members/JiajunLi.jpg",
          name: "Jiajun Zeng",
          position: "Additional Faculty Advisor",
          intro:
            "Postdoctoral fellow in Landscape Architecture, South China University of Technology",
        },
        {
          index: 1,
          photo: "http://lid-cbalt.com/data/images/members/YangYang.jpg",
          name: "Yang Yang",
          position: "Additional Faculty Advisor",
          intro:
            "Postdoctoral fellow in Landscape Architecture, South China University of Technology",
        },
      ],
      techList:[
        {
          index: 1,
          photo: "http://lid-cbalt.com/data/images/members/ChengyuFeng.jpg",
          name: "Chengyu Feng",
          position: "Technical Support",
          intro:
            "Undergraduate of Computer Science and Technology major, South China University of Technology",
        },
        {
          index: 1,
          photo: "http://lid-cbalt.com/data/images/members/XinyiGuo.jpg",
          name: "Xinyi Guo",
          position: "Technical Support",
          intro:
            "Postgraduate of Landscape Architecture, South China University of Technology",
        },
        {
          index: 1,
          photo: "http://lid-cbalt.com/data/images/members/ZiqiLi.jpg",
          name: "Ziqi Li",
          position: "Technical Support",
          intro:
            "Undergraduate of Interaction Design major, South China University of Technology",
        },
      ]
    };
  },
};
</script>

<style scoped>
.banner {
  height: 520px;
  background-image: url("http://lid-cbalt.com/data/images/bg4-home.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  margin-bottom: 10px;
  text-align: left;
}
.banner-bgdarkener {
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  vertical-align: bottom;
  padding: 0 20px 0 20px;
}
.banner-heading {
  font-family: "Arial Negreta", "Arial Normal", "Arial";
  font-weight: 700;
  font-style: normal;
  font-size: 30px;
  color: #6cdb9f;
  margin-top: 0px;
}
.banner-text {
  height: 85px;
  font-family: "Arial Normal", "Arial";
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: #ffffff;
}
.contents {
  width: 91.7%;
  margin-left: 4.17%;
  margin-bottom: 300px;
}
h5 {
  font-weight: 700;
  font-style: normal;
  font-size: 2rem;
  color: #91b354;
  text-align: left;
  margin-bottom: 10px;
}
img {
  height: 3.2rem;
}
p {
  font-size: 20px;
  color: #7f7f7f;
}
.line {
  background: inherit;
  background-color: #91b354;
  margin-bottom: 30px;
}
.len1 {
  width: 40%;
  height: 4px;
}
.len2 {
  width: 50%;
  height: 4px;
}
.len3 {
  width: 75%;
  height: 4px;
}
.len4 {
  width: 100%;
  height: 4px;
}
.contact {
  padding: 20px;
  border-style: solid;
  border-color: #91b354;
  border-width: 1px;
  border-radius: 10px;
  height: 75%;
}
.contact-col {
  padding: 0 20px 0 20px;
}
.member-title1 {
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  font-weight: 700;
  font-style: normal;
  font-size: 1.4rem;
  text-align: left;
  color: #333333;
}
.member-title2 {
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  font-weight: 700;
  font-style: normal;
  font-size: 1.1rem;
  color: #91b354;
  text-align: left;
  margin-bottom: 2px;
}
.member-name {
  letter-spacing: normal;
  color: #333333;
  font-style: normal;
  font-size: 0.8rem;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  font-weight: 700;
  text-align: left;
  margin: 2px;
}
.member-photo {
  width: 100%;
  height: auto;
}
.member-intro {
  font-family: "微软雅黑 Light", "微软雅黑 Regular", "微软雅黑";
  font-weight: 250;
  font-style: normal;
  font-size: 0.8rem;
  text-align: left;
  letter-spacing: normal;
  color: #333333;
}
</style>